package com.example.day0221.demon

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.staggeredgrid.LazyVerticalStaggeredGrid
import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridCells
import androidx.compose.foundation.lazy.staggeredgrid.items
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.unit.dp
import coil.compose.AsyncImage
import java.io.Serializable

/*
纵向列表
 */
data class Student(val name:String,val desc:String,val img:String):Serializable
@Composable
fun  Demon03() {
    val list= mutableListOf<Student>()
    for (i in 1..20){
        list.add(
            Student(
                "张三 $i",
                "这是我的个人简介： $i",
                "https://img.keaitupian.cn/newupload/12/1670403790371972.jpg"
            )
        )
    }
    //modifier 一般修改的当前控件整mo体的内外边距和修饰
    //verticalArrangement 修改的是内容的位置或者间距
    //LazyRow 横向列表
    //相当于adapter
    
   // LazyColumn (modifier = Modifier.padding(10.dp), verticalArrangement = Arrangement.spacedBy(10.dp), content = { items(list){ StudentItem(student = it) } })

    // LazyRow (modifier = Modifier.padding(10.dp), horizontalArrangement = Arrangement.spacedBy(10.dp), content = { items(list){ StudentItem(student = it) } })

    //纵向网格布局
//    LazyVerticalGrid(
//        modifier = Modifier.padding(10.dp),
//        verticalArrangement = Arrangement.spacedBy(10.dp),
//        horizontalArrangement = Arrangement.spacedBy(10.dp),
//        columns = GridCells.Fixed(2),
//        content = {
//            items(list) {
//                StudentItem(student = it)
//            }
//        })


//    //横向网格布局
//    LazyHorizontalGrid(rows = GridCells.Fixed(2), content = {
//        items(list) {
//            StudentItem(student = it)
//        }
//    })

//瀑布流
    LazyVerticalStaggeredGrid(columns = StaggeredGridCells.Fixed(2),
        content = { items(list) { StudentItem(student = it) }
    })
    
}
//相当于RecyclerView中的Item
@Composable
fun StudentItem(student: Student){
    Row(
        modifier = Modifier.padding(20.dp,20.dp)
    ) {
        AsyncImage(model = student.img,
            contentDescription ="" ,
            //内容裁剪,比如一张图片超出了画框的范围,会根据裁剪规则进行裁剪
            contentScale = ContentScale.Crop,
            modifier = Modifier
                .size(80.dp)
                .clip(CircleShape)
        )
        //给了一个10dp的空格
        Spacer(modifier = Modifier.width(10.dp))
        Column (
            modifier = Modifier.height(80.dp),
            verticalArrangement = Arrangement.SpaceAround
        ){
            Text(text = student.name)
            Text(text = student.desc)
        }
    }
}